<script setup>
import { ref } from 'vue';

// 模拟学校数据
const schools = ref([
  { name: '武汉一中' },
  { name: '武汉二中' },
  { name: '武汉三中' }
]);
const selectedSchool = ref(schools.value[0]);

// 处理学校选择变化
const handleSchoolChange = (e) => {
  const index = e.detail.value;
  selectedSchool.value = schools.value[index];
  console.log('已选择学校:', selectedSchool.value.name);
};

// 队伍名称
const teamName = ref('武汉一中队');

// 队长信息
const captain = ref({
  avatar: '../../static/image/3.1.11.jpg',
  name: '陈婉仪',
  gender: '女'
});

// 队员信息
const members = ref([
  {
    avatar: '/static/image/3.1.11.jpg',
    name: '张晓明',
    phone: '1234567890'
  },
  {
    avatar: '/static/image/3.1.11.jpg',
    name: '张晓明',
    phone: '1234567891'
  },
  {
    avatar: '/static/image/3.1.11.jpg',
    name: '王易阳',
    phone: '1234567892'
  }
]);

// 成员招募状态
const isRecruiting = ref(true);

// 转让队长方法
const to = '/pages/work1/changeteam'
const transferCaptain = (target) => {
  uni.navigateTo({
    url:target
  })
};

</script>

<template>
  <view class="team-info-page">
    <!-- 学校选择 -->
    <view class="info-item">
      <text class="item-label">更换中学</text>
      <picker class="item-value" mode="selector" :range="schools" range-key="name" @change="handleSchoolChange">
        <view class="picker-value">{{ selectedSchool.name }}</view>
      </picker>
    </view>
    <!-- 队伍名称修改 -->
    <view class="info-item">
      <text class="item-label">修改队伍名称</text>
      <input class="item-value" v-model="teamName" placeholder="请输入队伍名称" />
    </view>
    <!-- 队长信息 -->
    <view class="info-item">
      <text class="item-label">队长信息</text>
       <view class="captain-info">
        <image class="avatar" :src="captain.avatar"></image>
        <text class="captain-name">{{ captain.name }}</text>
        <button class="transfer-btn" @click="transferCaptain(to)">转让队长</button>
      </view>
    </view>
    <!-- 队员信息 -->
    <view class="info-item">
      <text class="item-label">队员信息</text>
      <view class="member-list">
        <view class="member-item" v-for="(member, index) in members" :key="index">
          <image class="avatar" :src="member.avatar"></image>
          <text class="member-name">{{ member.name }}</text>
          <button class="call-btn" >拨打电话</button>
        </view>
      </view>
    </view>
    <!-- 成员招募 -->
    <view class="info-item">
      <text class="item-label">成员招募</text>
      <switch class="recruit-switch" />
    </view>
    <!-- 底部提示信息 -->
    <view class="footer-tip">
      <text>队伍调整、解散队伍、退出队伍请联系管理员</text>
    </view>
  </view>
</template>

<style scoped>
.team-info-page {
  padding: 15px;
  background-color: #f5f5f5;
}

.info-item {
  background-color: #fff;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.item-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
  display: block;
}

.item-value {
  font-size: 16px;
  color: #333;
}

.picker-value {
  font-size: 16px;
  color: #333;
}

.captain-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.captain-name {
  flex: 1;
  font-size: 16px;
  color: #333;
}

.transfer-btn {
  background-color: #007AFF;
  color: #fff;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 12px;
}

.member-list {
  margin-top: 5px;
}

.member-item {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.member-name {
  flex: 1;
  font-size: 16px;
  color: #333;
  margin-left: 10px;
}

.call-btn {
  background-color: #4CD964;
  color: #fff;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 12px;
}

.recruit-switch {
  margin-top: 5px;
}

.footer-tip {
  margin-top: 15px;
  text-align: center;
  font-size: 12px;
  color: #999;
}
</style>